<template>
  <div class="main-page">
    <div class="page-title">
      <span>房地产市场交易监测分析</span>
    </div>
    <div class="main-content">
      <el-icon class="next-page-btn">
        <ArrowLeftBold @click="router.go(-1)"/>
      </el-icon>
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="8">
          <div class="main-content-left-module main-content-left-module-one">
            <div class="main-content-gird-title">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                <p>房地产市场销售情况</p>
              </div>
              <el-select class="main-content-left-module-select" v-model="housePropertyMarketSalesCondition"
                         size="small"
                         @change="changeModuleLeft($event, 'one')">
                <el-option
                  v-for="item in housePropertyMarketSalesConditionSelectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  class="custom-select-option"
                />
              </el-select>
              <div class="main-content-left-module-tabs">
                <el-tabs v-model="housePropertyMarketSalesConditionTab"
                         @tab-change="changeHousePropertyMarketSalesConditionTab">
                  <el-tab-pane v-for="(item, index) of housePropertyMarketSalesConditionTabs" :key="index"
                               :label="item.label"
                               :name="item.value"></el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="house-property-market-sales-condition-chart">
              <line-new
                v-if="housePropertyMarketSalesConditionData.seriesData?.length"
                :line-data="housePropertyMarketSalesConditionData"
                class="h230"
                ref="housePropertyMarketSalesConditionDomRef"
              ></line-new>
            </div>
          </div>
        </el-col>
        <el-col :span="8" style="position: relative; padding: 0">
          <div class="middle-map">
            <map-box :listData="mapList" :mapConfig="{ layoutSize: '105%' }" @mapNameChange="mapNameChange"></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : "" }}</div>
          </div>
          <div class="project-recommend">
            <div class="main-content-gird-title" style="margin-bottom: 10px">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
              <p>商业选址推荐</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="project-recommend-filtrate" style="margin-top: 10px">
              <el-form :model="projectRecommendForm" label-position="left">
                <el-form-item label="快速推荐">
                  <el-checkbox-group v-model="projectRecommendForm.quickRecommendation">
                    <el-checkbox v-for="item of quickRecommendationCheckBoxList" :label="item.label"
                                 :name="item.value"/>
                  </el-checkbox-group>
                  <div class="project-recommend-filtrate-name-search">
                    <el-autocomplete
                      class="project-recommend-filtrate-name-search-autocomplete"
                      v-model="projectRecommendForm.projectName"
                      :fetch-suggestions="projectRecommendNameSearchRemoteMethod"
                      placeholder="请输入项目快捷推荐"
                      clearable
                    />
                    <div class="project-name-search-btn" @click="importProjectName">导入</div>
                  </div>
                  <div class="reset-filtrate-btn" @click="resetFiltrate">重置筛选条件</div>
                </el-form-item>
                <el-form-item label="标签推荐" class="tag-form-item">
                  <el-select
                    class="multiple-select tag-multiple-select"
                    v-model="projectRecommendForm.tagRecommendation"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option v-for="item in tagRecommendationOptions" :key="item.value" :label="item.label"
                               :value="item.value"/>
                  </el-select>
                  <div class="accord-condition-type">
                    <span>满足</span>
                    <el-select v-model="projectRecommendForm.accordCondition" size="small" placeholder="请选择">
                      <el-option
                        v-for="item in [
                          {
                            id: 1,
                            value: 1,
                            label: '任一条件',
                          },
                          {
                            id: 2,
                            value: 2,
                            label: '所有条件',
                          },
                        ]"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item label="区域推荐">
                  <el-select
                    class="multiple-select"
                    v-model="projectRecommendForm.areaRecommendation"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option v-for="item in areaOptions" :key="item.regionCode" :label="item.regionName"
                               :value="item.regionCode"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="开发商推荐">
                  <el-select
                    class="multiple-select"
                    v-model="projectRecommendForm.developersRecommendation"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    size="small"
                    placeholder="请选择"
                  >
                    <el-option v-for="item in developersRecommendationOptions" :key="item.value" :label="item.label"
                               :value="item.value"/>
                  </el-select>
                </el-form-item>
                <el-form-item class="multiple-condition-list" label="推荐条件">
                  <div class="multiple-condition-list-item"
                       v-for="(item, index) of projectRecommendForm.recommendationConditionsList" :key="index">
                    <el-icon class="multiple-condition-list-item-delete" v-if="index !== 0"
                             @click="deleteRecommendationCondition(item, index)">
                      <Delete/>
                    </el-icon>
                    <el-select
                      v-model="item.conditionValue"
                      size="small"
                      placeholder="请选择"
                      @change="recommendationConditionItemChange($event, index)"
                    >
                      <el-option
                        v-for="optionItem in recommendationConditionsSelectList"
                        :key="optionItem.value"
                        :label="optionItem.label"
                        :value="optionItem.value"
                        :disabled="optionItem.disabled"
                      />
                    </el-select>
                    <el-slider v-model="item.rangeValue" range :disabled="!item.conditionValue" size="small"
                               :min="item.min" :max="item.max"/>
                    <div class="slider-range-input">
                      <el-input
                        type="number"
                        v-model="item.rangeValue[0]"
                        placeholder="请输入"
                        :minlength="item.min"
                        :maxlength="item.rangeValue[1] ? item.rangeValue[1] - 1 : item.max - 1"
                      />
                      <span>&nbsp;~&nbsp;</span>
                      <el-input
                        type="number"
                        v-model="item.rangeValue[1]"
                        placeholder="请输入"
                        :minlength="item.rangeValue[0] ? item.rangeValue[0] + 1 : item.min + 1"
                        :maxlength="item.max"
                      />
                      <span>{{ item.unit }}</span>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label=" " class="btns-form-item">
                  <el-button @click="addProjectCommendCondition">添加</el-button>
                  <el-button type="primary"
                             @click="projectRecommendFiltrateonSubmit($event, { pageNum: 1, pageSize: 10 })">开始推荐
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="pubilc-chart-title" style="margin: 10px 0">推荐列表</div>
            <div class="recommend-table-list-module">
              <recommend-table-list
                :tableData="recommendTableListData"
                isApiPagination
                :tablePaginationInfo="recommendTableInfo"
                :columnData="recommendColumnData"
                @changePageNum="changeRecommendTablePage"
              ></recommend-table-list>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="table-row">
            <div class="policy-impact-analysis-left">
              <div class="main-content-gird-title">
                <div class="title-row">
                  <img class="main-content-gird-title-logo"
                       src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                  <p>网签统计查询</p>
                </div>
                <CityPicker class="house-property-sales-select" v-model="currentNetCity"
                            @update:cityValue="handleNetCityPickerChange"></CityPicker>
              </div>
              <div class="module-title-content-middle-line"></div>
              <div class="select-row">
                <el-select
                  class="house-property-sales-select"
                  v-model="selectedHouseType"
                  size="small"
                  @change="changeHouseType"
                  style="width: 160px; margin-right: 10px"
                >
                  <el-option v-for="item in houseTypeTabs" :key="item.value" :label="item.label" :value="item.value"/>
                </el-select>
                <el-select
                  class="house-property-sales-select"
                  v-model="selectedHouseArea"
                  size="small"
                  @change="changeHouseArea"
                  style="width: 160px"
                >
                  <el-option v-for="item in areaTypeList" :key="item.value" :label="item.name" :value="item.value"/>
                </el-select>
              </div>

              <div class="policy-list">
                <table-list :tableData="policyTableListData" :columnData="policyColumnData"></table-list>
              </div>
            </div>
            <div class="policy-impact-analysis-right">
              <div class="main-content-gird-title">
                <div class="title-row">
                  <img class="main-content-gird-title-logo"
                       src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                  <span>开发商成交情况统计</span>
                </div>
                <CityPicker
                  class="house-property-sales-select"
                  v-model="currentDevelopCity"
                  @update:cityValue="handleDevelopCityPickerChange"
                ></CityPicker>
              </div>
              <div class="module-title-content-middle-line"></div>
              <div class="policy-list" style="margin-top: 20px">
                <table-list :tableData="dealTableListData" :columnData="dealColumnData"></table-list>
              </div>
            </div>
          </div>

          <div class="house-type-recommend">
            <div class="main-content-gird-title">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                <p>主流户型推荐</p>
              </div>
              <CityPicker
                class="house-property-sales-select"
                v-model="currentHouseTypeCity"
                @update:cityValue="handleHouseTypeCityPickerChange"
              ></CityPicker>
              <RangePicker
                class="house-property-sales-select"
                v-model="currentHouseTypeRange"
                @update:rangeValue="handleHouseTypeRangePickerChange"
              ></RangePicker>
              <div class="house-property-sales-date">
                <DatePicker
                  v-model="selectedHouseTypeDate"
                  :type="currentHouseTypeRange"
                  @update:modelValue="handleHouseTypeDatePickerChange"
                  size="small"
                ></DatePicker>
              </div>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="house-type-recommend-cascader">
              <div>
                <span>房屋标签</span>
                <el-cascader :options="houseOptions" v-model="houseTagValues" :props="props" collapse-tags size="small"
                             clearable @change="handleHouseTags"/>
              </div>
              <div>
                <span>购房人标签</span>
                <el-cascader :options="personOptions" v-model="personTagValues" :props="props" collapse-tags
                             size="small" clearable @change="handleHouseTags"/>
              </div>
            </div>
            <graph-component
              v-if="productAndBuyerRelationshipData.seriesData.data?.length"
              ref="productAndBuyerRelationship"
              :graphData="productAndBuyerRelationshipData"
              class="h279"
            ></graph-component>
          </div>

          <div class="macro-economic-statistics">
            <div class="main-content-gird-title">
              <div class="title-row">
                <img class="main-content-gird-title-logo"
                     src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png" alt=""/>
                <p>宏观经济数据统计</p>
              </div>
              <CityPicker class="house-property-sales-select" v-model="currentMacroCity"
                          @update:cityValue="handleMacroCityPickerChange"></CityPicker>
              <div class="house-property-sales-date">
                <DatePicker
                  v-model="selectedMacroDate"
                  :type="currentMacroRange"
                  @update:modelValue="handleMacroDatePickerChange"
                  size="small"
                ></DatePicker>
              </div>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="macro-economic-data-statistics-tabs">
              <el-tabs v-model="currentEconomicDataStatisticsTab" @tab-change="changeMacroEconomicDataStatisticsTab">
                <el-tab-pane v-for="(item, index) of economicDataStatisticsTabs" :key="index" :label="item.label"
                             :name="item.id"></el-tab-pane>
              </el-tabs>
            </div>
            <scatter-component
              v-if="macroEconomicDataStatisticsData.areaNameList?.length"
              ref="macroEconomicDataStatistics"
              :currentEconomicDataStatisticsTab="currentEconomicDataStatisticsTab"
              :cityAreaData="macroEconomicDataStatisticsData"
              class="h280"
            ></scatter-component>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import acreageTabBg from "@/assets/img/housePropertyAnalysis/statistics/acreage-tab-bg.png";
import lineSalesTrendForecast from "@/components/housePropertyAnalysis/forecast/lineSalesTrendForecast.vue";
import barFactorImportance from "@/components/housePropertyAnalysis/forecast/barFactorImportance.vue";
import recommendTableList from "@/components/housePropertyTradeAnalysis/tableList/recommend.vue";
import mapBox from "@/components/housePropertyTradeAnalysis/map/index.vue";
import bar from "@/components/housePropertyAnalysis/forecast/bar.vue";
import linePolicyImpactForecast from "@/components/housePropertyAnalysis/forecast/linePolicyImpactForecast.vue";
import barHousePropertyProjectForecast
  from "@/components/housePropertyAnalysis/forecast/barHousePropertyProjectForecast.vue";
import bubble from "@/components/housePropertyTradeAnalysis/bubble/index.vue";
import tableList from "@/components/housePropertyTradeAnalysis/tableList/index.vue";
import graphComponent from "@/components/housePropertyTradeAnalysis/graph/index.vue";
import scatterComponent from "@/components/housePropertyTradeAnalysis/scatter/macro.vue";
import cityPicker from "@/components/housePropertyTradeAnalysis/cityPicker/index.vue";
import rangePicker from "@/components/housePropertyTradeAnalysis/rangePicker/index.vue";
import datePicker from "@/components/housePropertyTradeAnalysis/datePicker/index.vue";
import lineComponent from "@/components/housePropertyTradeAnalysis/line/line.vue";
import lineDouble from "@/components/housePropertyTradeAnalysis/line/lineOne.vue";
import {useRouter} from "vue-router";

import {pxToRem} from "@/utils/index";
import {
  getSupplyDemandGetRegion, // 区域list
} from "@/api/housePropertyAnalysis/analysis";
import {
  getPersonHouseNumber,
  getPersonHouseArea,
  getPersonHouseFundStatistics,
  getPersonHousePropertyStatistics,
  getPersonHouseStatistics,
  getPersonHouseTypeStatistics,
  getPersonHouseMiddle,
  getPersonHouseSupply,
  getPersonHousePopulation,
  getPersonHouseCommodity,
} from "@/api/personInfor";

import {
  getSupplyDemandProductHousehold, // 产品与购房人关系-关系图-graph
  getSupplyDemandMacroeconomic, // 宏观经济数据统计-散点图-scatter
  getSupplyDemandLandSupply, // 房地产土地供应统计-矩形树图和折线图
} from "@/api/housePropertyAnalysis/statistics";
import {
  getRealEstateAnalyzePolicyImpact, // 政策影响分析-政策列表
  getRealEstateForecastPolicySales, // 政策影响分析-政策影响预测
  getRealEstateAnalyzeImpactForecast, // 政策影响分析-房地产项目销售/价格预测
  getRealEstateForecastSalesTrend, // 房地产市场风险监控预警
  getRealEstateDeveloperList, // 开发商推荐下拉选
  getRealEstateFindProducts, // 项目推荐-导入按钮-快捷推荐
  getRealEstateSelDeveloperCreditRating, // 项目推荐-导入按钮-远程搜索
  getRealEstateRecommendProjects, // 项目推荐-推荐列表
} from "@/api/housePropertyAnalysis/forecast";

import {
  riskMonitoringEarlyWarningValues, // 房地产市场风险监控预警值
  riskMonitoringEarlyWarning, // 房地产市场风险监控预警图
  inventoryDepletionCycle, // 各地库存及空置情况统计
  onlineSignatureStatisticsQuery, // 网签统计查询
  developerTransactionStatistics, // 开发商成交情况统计
  recommendedMainstreamLayout, // 主流户型推荐
  macroeconomicDataStatistics, // 宏观经济数据统计
  getSalesSituation, // 房地产市场销售情况
} from "@/api/housePropertyTradeAnalysis";

const router = useRouter();

const currentYearRange = ref(null); // 当前年份
const currentYearMonthDay = ref(null); // 当前年月日
const currentYear = ref(null); // 当前年
const currentMonth = ref(null); // 当前月
const currentWaringCity = ref("210000"); // 当前城市-监控预警
const currentStockCity = ref("210000"); // 当前城市-库存
const currentNetCity = ref("210000"); // 当前城市-网签统计
const currentDevelopCity = ref("210000"); // 当前城市-开发商成交
const currentHouseTypeCity = ref("210000"); // 当前城市-主流户型
const currentMacroCity = ref("210000"); // 当前城市-宏观经济数据统计
const currentMacroRange = ref("monthrange"); // 月范围-宏观经济数据统计
const currentHouseTypeRange = ref("year"); //日期类型
const selectedHouseTypeDate = ref(null); // 主流户型时间条件
const selectedMacroDate = ref(null); // 宏观经济数据统计时间条件
const currentEconomicDataStatisticsTab = ref(1); //宏观经济数据统计类型
const cityObj = ref({
  name: "",
  code: "210000",
}); // 地图-市名
const mapList = ref([
  {name: "沈阳市", value: 0, code: "210100", select: {disabled: false}, selected: false},
  {name: "大连市", value: 0, code: "210200", select: {disabled: true}, selected: false},
  {name: "鞍山市", value: 0, code: "210300", select: {disabled: true}, selected: false},
  {name: "抚顺市", value: 0, code: "210400", select: {disabled: true}, selected: false},
  {name: "本溪市", value: 0, code: "210500", select: {disabled: true}, selected: false},
  {name: "丹东市", value: 0, code: "210600", select: {disabled: true}, selected: false},
  {name: "锦州市", value: 0, code: "210700", select: {disabled: true}, selected: false},
  {name: "营口市", value: 0, code: "210800", select: {disabled: true}, selected: false},
  {name: "阜新市", value: 0, code: "210900", select: {disabled: true}, selected: false},
  {name: "辽阳市", value: 0, code: "211000", select: {disabled: true}, selected: false},
  {name: "盘锦市", value: 0, code: "211100", select: {disabled: true}, selected: false},
  {name: "铁岭市", value: 0, code: "211200", select: {disabled: true}, selected: false},
  {name: "朝阳市", value: 0, code: "211300", select: {disabled: true}, selected: false},
  {name: "葫芦岛市", value: 0, code: "211400", select: {disabled: true}, selected: false},
]);

const housePropertyMarketSalesCondition = ref(1) // 房地产市场销售情况-select-value
const housePropertyMarketSalesConditionSelectList = ref([ // 房地产市场销售情况-select-list
  {label: '成交金额', value: 1},
  {label: '成交均价', value: 2},
  {label: '出租量', value: 3},
  {label: '吸纳量', value: 4},
  {label: '吸纳周期', value: 5},
  {label: '预售面积', value: 6},
  {label: '房地产价格指数', value: 7},
  {label: '房地产价格', value: 8},
  {label: '房地产租金', value: 9},
  {label: '租售比', value: 10},
  {label: '平均房价指数', value: 11},
  {label: '新房供应量', value: 12},
  {label: '二手房成交量和价格异常', value: 13},
  {label: '房贷利率', value: 14},
]) // 房地产市场销售情况-select-list

const housePropertyMarketSalesConditionTab = ref(1) // 房地产市场销售情况-tab-value
const housePropertyMarketSalesConditionTabs = ref([ // 房地产市场销售情况-tab-list
  {
    value: 1,
    label: '按天',
  },
  {
    value: 4,
    label: '按周',
  },
  {
    value: 2,
    label: '按月'
  },
  {
    value: 3,
    label: '按年'
  }
])

const houseOptions = ref([
  {
    value: "hxjg",
    label: "户型结构",
    children: [
      {
        value: "普通住房",
        label: "普通住房",
      },
      {
        value: "复式",
        label: "复式",
      },
      {
        value: "错层",
        label: "错层",
      },
      {
        value: "平层",
        label: "平层",
      },
    ],
  },
  {
    value: "hx",
    label: "户型居室",
    children: [
      {
        value: "一居室",
        label: "一居室",
      },
      {
        value: "两居室",
        label: "两居室",
      },
      {
        value: "三居室",
        label: "三居室",
      },
      {
        value: "四居室",
        label: "四居室",
      },
      {
        value: "五居室",
        label: "五居室",
      },
    ],
  },
  {
    value: "jzys",
    label: "建筑样式",
    children: [
      {
        value: "高层",
        label: "高层",
      },
      {
        value: "小高层",
        label: "小高层",
      },
      {
        value: "洋房",
        label: "洋房",
      },
    ],
  },
]);

const personOptions = ref([
  {
    value: "nl",
    label: "年龄",
    children: [
      {
        value: "0-17岁",
        label: "0-17岁",
      },
      {
        value: "18-34岁",
        label: "18-34岁",
      },
      {
        value: "35-39岁",
        label: "35-39岁",
      },
      {
        value: "60岁及以上",
        label: "60岁及以上",
      },
    ],
  },
  {
    value: "xl",
    label: "学历",
    children: [
      {
        value: "小学",
        label: "小学",
      },
      {
        value: "初中",
        label: "初中",
      },
      {
        value: "高中",
        label: "高中",
      },
      {
        value: "专科",
        label: "专科",
      },
      {
        value: "本科",
        label: "本科",
      },
      {
        value: "研究生",
        label: "研究生",
      },
      {
        value: "博士",
        label: "博士",
      },
    ],
  }
]);

const props = ref({multiple: true});

const landSupplyTrendData = ref({
  // 房地产土地供应统计-土地供应统计-data
  xAxisData: [],
  sumSeriesData: [], // 接口返回总折线图数据
  seriesData: [
    // 根据tab渲染数据
    [],
    [],
  ],
});

const riskWarningValues = ref([
  {label: "平均房价指数", value: 0},
  {label: "租售比", value: 0},
  {label: "新房供应量", value: 0},
  {label: "二手房均价", value: 0},
  {label: "商业贷款利率年度涨幅", value: 0},
]);

const currentHousePropertyProjectSalesTrendForecastTab = ref(1); // 当前房地产市场风险监控预警tab
const housePropertyProjectSalesTrendForecastTabs = ref([
  // 房地产市场风险监控预警tabs-list
  {
    id: 1,
    label: "销售套数",
  },
  {
    id: 2,
    label: "销售面积",
  },
  {
    id: 3,
    label: "销售金额",
  },
  {
    id: 4,
    label: "销售均价",
  },
]);

const productAndBuyerRelationship = ref(null);

const productAndBuyerRelationshipData = ref({
  // 主流户型推荐
  seriesData: {
    data: [],
    // 节点间的关系数据
    links: [],
  },
});

const macroEconomicDataStatisticsData = ref({
  // 宏观经济数据统计-data
  areaNameList: [], // 区列表
  series: [], // 渲染数据
});

const economicDataStatisticsTabs = ref([
  // 宏观经济数据统计tabs-list
  {
    id: 1,
    label: "CPI涨幅",
    name: "population",
  },
  {
    id: 2,
    label: "GDP",
    name: "GDP",
  },
]);

const housePropertyLandSupplyStatisticsData = ref({
  // 房地产土地供应统计-新增房屋建筑面积情况-data
  title: "新增房屋建筑面积情况",
  sumTitle: "新增房屋建筑总面积",
  sumAcreage: null,
  sumPercentage: null,
  typeList: [
    // 新增房屋建筑面积情况-types
    {
      label: "规划",
      color: "#0E5FFF",
    },
    {
      label: "待开工",
      color: "#01C4D2",
    },
    {
      label: "在建",
      color: "#E65992",
    },
  ],
  seriesData: [],
});

const housePropertyProjectSalesTrendData = ref({
  // 房地产市场风险监控预警-平均房价指数变动走势
  xAxisData: [],
  seriesData: [],
  legendStyle: {
    show: false,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
  },
});
const housePropertyProjectSalesTrend = ref(null); // 房地产市场风险监控预警-平均房价指数变动走势-domref

const salesFactorImportanceData = ref({
  // 房地产市场风险监控预警-租售比变动走势
  xAxisData: [],
  seriesData: [],
  legendStyle: {
    show: false,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
  },
});
const salesFactorImportance = ref(null); // 房地产市场风险监控预警-租售比变动走势-domref

const housePropertyUnitPriceTrendData = ref({
  // 房地产市场风险监控预警-新房供应量变动走势

  xAxisData: [],
  seriesData: [],
  legendStyle: {
    show: false,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
  },
});
const housePropertyUnitPriceTrend = ref(null); // 房地产市场风险监控预警-新房供应量变动走势-domref

const unitPriceFactorImportanceData = ref({
  // 房地产市场风险监控预警-二手房成交量和均价变动走势
  xAxisData: [],
  seriesData: [],
  legendStyle: {
    show: true,
    icon: "rect",
    left: 10,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
  },
});
const unitPriceFactorImportance = ref(null); // 房地产市场风险监控预警-二手房成交量和均价变动走势-domref

const housePropertyTaxRateTrendData = ref({
  // 房地产市场风险监控预警-房贷利率变动走势

  xAxisData: [],
  seriesData: [],
  legendStyle: {
    show: true,
    icon: "rect",
    left: 0,
    top: 0,
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 10,
  },
});
const housePropertyTaxRateTrend = ref(null); // 房地产市场风险监控预警-房贷利率变动走势-domref

const projectRecommendForm = ref({
  quickRecommendation: [], // 快速推荐
  projectName: "", // 项目名称
  tagRecommendation: [], // 标签推荐
  areaRecommendation: [], // 区域推荐
  developersRecommendation: [], // 开发商推荐
  accordCondition: 1, // 满足条件类型
  recommendationConditionsList: [
    // 推荐条件list
    {
      conditionValue: "单价",
      rangeValue: [0, 50000],
      min: 0,
      max: 50000,
      unit: "元",
    },
  ],
});
const quickRecommendationCheckBoxList = ref([
  // 项目推荐-筛选-快速推荐多选list
  {
    id: 1,
    label: "学区",
    value: "学区",
  },
  {
    id: 2,
    label: "交通",
    value: "交通",
  },
  {
    id: 3,
    label: "保值",
    value: "交通",
  },
]);
const tagRecommendationOptions = ref([
  // 项目推荐-筛选-标签推荐select-list
  {
    label: "商圈",
    value: "商圈",
  },
  {
    label: "地铁",
    value: "地铁",
  },
  {
    label: "无工厂",
    value: "无工厂",
  },
  {
    label: "一河两岸",
    value: "一河两岸",
  },
  {
    label: "重点学区",
    value: "重点学区",
  },
  {
    label: "商圈医疗",
    value: "商圈医疗",
  },
]);
const areaOptions = ref([]); // 项目推荐-筛选-区域推荐select-list
const developersRecommendationOptions = ref([]); // 项目推荐-筛选-开发商推荐select-list
const recommendationConditionsSelectList = ref([
  // 项目推荐-筛选-推荐条件select-list
  {
    id: 1,
    label: "单价",
    value: "单价",
    min: 0,
    max: 50000,
    unit: "元",
    disabled: true,
  },
  {
    id: 2,
    label: "楼层",
    value: "楼层",
    min: 0,
    max: 50,
    unit: "层",
    disabled: false,
  },
  {
    id: 3,
    label: "面积",
    value: "面积",
    min: 0,
    max: 500,
    unit: "㎡",
    disabled: false,
  },
  {
    id: 4,
    label: "楼龄",
    value: "楼龄",
    min: 0,
    max: 100,
    unit: "年",
    disabled: false,
  },
  {
    id: 5,
    label: "总价",
    value: "总价",
    min: 0,
    max: 1000,
    unit: "万元",
    disabled: false,
  },
]);

const selectedHouseType = ref(0); // 网签统计查询-房屋类别
const selectedHouseArea = ref(0); // 网签统计查询-面积情况

const recommendTableListData = ref([]); // 推荐列表tablelist
const recommendColumnData = ref([]); // 推荐列表columnlist
const recommendTableInfo = ref({
  // 推荐列表-分页-table信息
  total: 0,
  currentPage: 1,
});

const housePropertyLandSupplyStatistics = ref(null); // dom-ref
const macroEconomicDataStatistics = ref(null);
const forecastSimulationAnalysisForm = ref({
  area: [], // 地区
  regulatoryFactorConditionsList: [
    {
      conditionValue: "贷款首付",
      rangeValue: [0, 0],
      min: 0,
      max: 100,
      unit: "%",
    },
  ], // 调控因子list
});
const regulatoryFactorConditionsSelectList = ref([
  {
    id: 1,
    label: "贷款首付",
    value: "贷款首付",
    disabled: true,
  },
  {
    id: 2,
    label: "因子2",
    value: "因子2",
    disabled: false,
  },
  {
    id: 3,
    label: "因子3",
    value: "因子3",
    disabled: false,
  },
]);

const houseTypeTabs = ref([
  // 房屋分类tabs
  {
    label: "全部分类",
    value: 0,
  },
  {
    label: "商品房",
    value: 1,
  },
  {
    label: "二手房",
    value: 2,
  },
]);

const areaTypeList = ref([
  // 面积select-list
  {value: 0, name: "全部面积"},
  {value: "0-60", name: "小于60㎡"},
  {value: "60-90", name: "60-90㎡"},
  {value: "90-120", name: "90-120㎡"},
  {value: "120-144", name: "120-144㎡"},
  {value: "144-180", name: "144-180㎡"},
  {value: "180-", name: "大于180㎡"},
]);

const averageHousePriceData = ref(null); //平均房价指数变动走势
const priceToRentData = ref(null); //租售比变动走势
const houseSupplyData = ref(null); //新房供应量变动走势
const secondHouseData = ref(null); //二手房成交量和均价变动走势
const mortgageRateData = ref(null); //房贷利率变动走势

import usePersonHouseData from "@/hooks/personInfor/usePersonInfor";

const personHouseData = usePersonHouseData();

const changeHouseType = (item) => {
  // select切换类型-房屋分类
  selectedHouseType.value = item;
  initOnlineSignatureStatisticsQuery(currentNetCity.value);
};
const changeHouseArea = (item) => {
  // select切换城市-房屋面积
  selectedHouseArea.value = item;
  initOnlineSignatureStatisticsQuery(currentNetCity.value);
};

const handleHouseTypeDatePickerChange = (newValue) => {
  initProductAndBuyerRelationship()
};

const handleMacroDatePickerChange = (newValue) => {
  initMacroeconomicDataStatistics()
};

const makeData = (list, upArray, dataSource) => {
  dataSource.forEach((item) => {
    const array = [...upArray, item.value];
    if (item.children) {
      makeData(list, array, item.children);
    } else {
      list.push(array);
    }
  });
  return list;
};

// 商品房总量变化分析
const personHouseCommodity = async () => {
  //   let { data } = await getPersonHouseCommodity(personHouseData.paramsApi);
  let paramsData = {
    result: [],
    nameList: [],
  };
  personHouseData.personHouseCommodityData = paramsData;
};

const forecastTrendAfterRegulation = ref([]); // 预测模拟分析-预测调控后走势
const forecastSimulationAnalysisTimeFiltrate = ref(null); // 预测模拟分析-月范围筛选
const monthRangeDisabledOption = ref([]); // 预测模拟分析-月范围筛选

const policyTableListData = ref([]); // 网签统计查询列表tablelist
const policyColumnData = ref([]); // 网签统计查询列表columnlist
const dealTableListData = ref([]); // 开发商成交情况统计列表tablelist
const dealColumnData = ref([]); // 开发商成交情况统计列表columnlist
const currentPolicyImpactAnalysisForecastTab = ref(1); // 当前政策影响预测tab
const linePolicyImpactForecastData = ref({
  // 政策影响预测Data
  legendData: [],
  xAxisData: [],
  seriesData: [],
  markAreaData: [],
});
const linePolicyImpactForecastRef = ref(null); // 政策影响预测-domref
const currentPolicyImpactAnalysisHousePropertyForecastTab = ref(1); // 政策影响分析-房地产项目预测-当前tab
const policyImpactAnalysisHousePropertyForecastTabs = ref([
  {
    id: 1,
    label: "地区",
  },
  {
    id: 2,
    label: "开发商",
  },
  {
    id: 3,
    label: "户型",
  },
  {
    id: 4,
    label: "面积",
  },
]); // 政策影响分析-房地产项目预测tabs
const currentHousePropertyProjectSalesForecastTab = ref(1); // 政策影响分析-房地产项目销售预测-当前tab
const barHousePropertyProjectSalesForecastData = ref({
  // 政策影响分析-房地产项目销售预测-Data
  xAxisData: [],
  seriesData: [],
  yAxisName: "销售套数",
});
const barHousePropertyProjectSalesForecastDomRef = ref(null); // 政策影响分析-房地产项目销售预测-domref
const barHousePropertyProjectPriceForecastData = ref({
  // 政策影响分析-房地产项目价格预测-Data
  xAxisData: [],
  seriesData: [],
  yAxisName: "均价",
});
const barHousePropertyProjectPriceForecastDomRef = ref(null); // 政策影响分析-房地产项目价格预测-domref
const housePropertyForecastTimeFiltrate = ref(null); // 房地产项目预测-月范围筛选

const housePropertyMarketSalesConditionDomRef = ref(null) // 房地产市场销售情况-domref
const housePropertyMarketSalesConditionData = ref({ // 房地产市场销售情况
  seriesData: [],
  xAxisData: [],
  yAxisName: '面积：万㎡'
})

const initHousePropertyLandSupplyStatistics = (cityCode, date) => {
  // 房地产土地供应统计(新增房屋建筑面积情况&&土地供应走势)-getData
  getSupplyDemandLandSupply({
    adcode: cityCode,
    dateType: 3,
    startTime: date[0],
    endTime: date[1],
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.leftMap?.landList?.length) {
        housePropertyLandSupplyStatisticsData.value.sumAcreage = resData?.leftMap?.sumArea;
        housePropertyLandSupplyStatisticsData.value.sumPercentage = resData?.leftMap?.sumAreaTb;
        housePropertyLandSupplyStatisticsData.value.seriesData = resData?.leftMap?.landList.map((x) => {
          return {
            name: x.typeName,
            value: Number(x?.childList[0]?.area) + Number(x?.childList[1]?.area),
            itemStyle: {
              color: housePropertyLandSupplyStatisticsData.value.typeList.find((y) => y.label === x.typeName)?.color || "#0E5FFF",
            },
            children: x?.childList?.map((z) => {
              return {
                ...z,
                name: z.typeName,
                value: Number(z.area),
                label: {
                  position: "inside",
                  formatter: (info) => {
                    return `${info?.data?.property}：${info?.data?.area}万㎡` + "\n" + `（${info?.data?.areaZb}%）`;
                  },
                },
              };
            }),
          };
        });
        landSupplyTrendData.value.sumSeriesData = resData?.rightMap?.lineEntityList?.map((x, i) => {
          const anotherFirstYear = Number(x.dateList[0]) - 1;
          let tempDateList = x.dateList;
          let tempResidenceList = x.residenceList;
          let tempBusinessList = x.businessList;
          tempDateList.unshift(anotherFirstYear);
          tempResidenceList.unshift(0);
          tempBusinessList.unshift(0);
          let tempObj = {
            isSelected: false,
            value: x.area,
            percentage: x.tb,
            label: x.type,
            xAxisData: tempDateList,
            seriesData: [tempResidenceList || [], tempBusinessList || []],
          };
          switch (x.type) {
            case "规划面积":
              tempObj.isSelected = true;
              tempObj.key = "project";
              break;
            case "在建面积":
              tempObj.key = "underConstruction";
              break;
            default: // 待开工
              tempObj.key = "waitingToStart";
              break;
          }
          return {
            ...tempObj,
          };
        });
        const currentSelectObj = landSupplyTrendData.value.sumSeriesData?.find((x) => x.label === "规划面积");
        landSupplyTrendData.value.seriesData = currentSelectObj?.seriesData;
        landSupplyTrendData.value.xAxisData = currentSelectObj?.xAxisData;
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      nextTick(() => {
        housePropertyLandSupplyStatistics.value?.updateChart();
      });
    });
};

const initMacroEconomicDataStatistics = (cityCode, date) => {
  // 宏观经济数据统计
  getSupplyDemandMacroeconomic({
    adcode: cityCode,
    dateType: 3,
    startTime: date[0],
    endTime: date[1],
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.nameList?.length) {
        macroEconomicDataStatisticsData.value.areaNameList = resData?.nameList;
      }
      if (resData?.dateList?.length) {
        macroEconomicDataStatisticsData.value.timelineList = resData?.dateList;
      }
      if (resData?.resultEntity?.length) {
        macroEconomicDataStatisticsData.value.series = resData?.resultEntity;
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      if (macroEconomicDataStatistics.value) {
        nextTick(() => {
          macroEconomicDataStatistics.value.updateChart();
        });
      }
    });
};

const changeHousePropertyProjectSalesTrendForecastTab = (item) => {
  // 切换当前房地产销售趋势分析tab
  initHousePropertyProjectSalesTrendAnalysis(cityObj.value.code);
};

const initProductAndBuyerRelationship = (cityCode) => {
  // 主流户型推荐
  const selectDate = selectedHouseTypeDate.value;
  let startDate = '';
  let endDate = '';
  if (typeof selectDate === 'object') {
    startDate = selectDate[0];
    endDate = selectDate[1];
  } else {
    startDate = selectDate;
    endDate = selectDate;
  }
  console.log(startDate, endDate);
  const date = new Date();
  const currentYear = date.getFullYear();
  const params = {
    xzqhdm: currentHouseTypeCity.value == "all" ? "210000" : currentHouseTypeCity.value,
    timeDimension: currentHouseTypeRange.value == "year" ? 2 : currentHouseTypeRange.value == "month" ? 1 : 3,
    startYearMonth: startDate || currentYear,
    endYearMonth: endDate || currentYear,
    param: houseTags.value,
  };
  recommendedMainstreamLayout(params)
    .then((res) => {
      const resData = res?.data;
      if (resData?.nameList?.length) {
        productAndBuyerRelationshipData.value.seriesData.data = [];
        productAndBuyerRelationshipData.value.seriesData.data = resData?.nameList?.map((x) => {
          return {
            ...x,
            id: x.name,
            itemStyle: {
              color: x.category === 0 ? "#E65992" : x.category === 1 ? "#0E5FFF" : "#01C4D2",
            },
          };
        });
      }
      if (resData?.mappingList?.length) {
        productAndBuyerRelationshipData.value.seriesData.links = [];
        productAndBuyerRelationshipData.value.seriesData.links = resData?.mappingList?.map((x) => {
          return {
            source: x.name,
            target: x.mappingName,
            lineStyle: {
              width: pxToRem(x.num / 100),
            },
            category: `关联数：${x.num}`,
          };
        });
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      nextTick(() => {
        productAndBuyerRelationship.value.updateChart();
      });
    });
};

const initHousePropertyProjectSalesTrendAnalysis = (cityCode) => {
  // 房地产市场风险监控预警-总的
  getRealEstateForecastSalesTrend({
    adcode: cityCode,
    requestType: currentHousePropertyProjectSalesTrendForecastTab.value,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.months?.length) {
        housePropertyProjectSalesTrendData.value.xAxisData = [0, ...resData?.months];
        housePropertyUnitPriceTrendData.value.xAxisData = [0, ...resData?.months];
        const tempXAxisData = housePropertyProjectSalesTrendData.value.xAxisData;
        let forecastIndex = 0;
        const currentYearMonthDate = new Date(`${currentYear.value}-${currentMonth.value}`).getTime();
        for (let i = 0; i < tempXAxisData?.length; i++) {
          if (new Date(tempXAxisData[i]).getTime() >= currentYearMonthDate) {
            forecastIndex = i;
            break;
          }
        }
        housePropertyProjectSalesTrendData.value.forecastIndex = forecastIndex;
        housePropertyUnitPriceTrendData.value.forecastIndex = forecastIndex;

        housePropertyProjectSalesTrendData.value.seriesData = [
          [0, ...resData?.salesList.map((x, i) => (i > forecastIndex ? null : x))],
          [null, ...resData?.salesList.map((x, i) => (i < forecastIndex ? null : x))],
        ];

        housePropertyUnitPriceTrendData.value.seriesData = [
          [0, ...resData?.avgList.map((x, i) => (i > forecastIndex ? null : x))],
          [null, ...resData?.avgList.map((x, i) => (i < forecastIndex ? null : x))],
        ];

        salesFactorImportanceData.value.yAxisData = [];
        salesFactorImportanceData.value.seriesData = [];
        resData?.topYzList?.forEach((x) => {
          salesFactorImportanceData.value.yAxisData.push(x.name);
          salesFactorImportanceData.value.seriesData.push(x.value);
        });

        unitPriceFactorImportanceData.value.yAxisData = [];
        unitPriceFactorImportanceData.value.seriesData = [];
        resData?.downYzList?.forEach((x) => {
          unitPriceFactorImportanceData.value.yAxisData.push(x.name);
          unitPriceFactorImportanceData.value.seriesData.push(x.value);
        });
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      nextTick(() => {
        housePropertyProjectSalesTrend.value.updateChart();
        salesFactorImportance.value.updateChart();
        housePropertyUnitPriceTrend.value.updateChart();
        unitPriceFactorImportance.value.updateChart();
      });
    });
};

const projectRecommendFiltrateonSubmit = (event, pageInfo = {pageNum: 1, pageSize: 10}) => {
  // 项目推荐-筛选
  initRecommendTableData(cityObj.value.code, pageInfo);
};

const changeRecommendTablePage = (page) => {
  initRecommendTableData(cityObj.value.code, {pageNum: page, pageSize: 10});
};

const projectRecommendNameSearchRemoteMethod = (query, cb) => {
  getRealEstateSelDeveloperCreditRating({projectName: query})
    .then((res) => {
      const resData = res?.data;
      if (resData?.length) {
        const tempList = resData.map((x) => {
          return {
            value: x,
          };
        });
        cb(tempList);
      } else {
        cb([]);
      }
    })
    .catch((error) => {
      console.log(error);
      cb([]);
    });
};

const importProjectName = () => {
  // 根据项目名称导入筛选数据
  getRealEstateFindProducts({projectName: projectRecommendForm.value.projectName})
    .then((res) => {
      const resData = res?.data;
      projectRecommendForm.value.quickRecommendation = [];
      projectRecommendForm.value.tagRecommendation = [];
      projectRecommendForm.value.areaRecommendation = [];
      projectRecommendForm.value.developersRecommendation = [];
      if (resData.isSchool === "是") projectRecommendForm.value.quickRecommendation.push("学区");
      if (resData.isTransportConvenient === "是") projectRecommendForm.value.quickRecommendation.push("交通");
      if (resData.isValueMaintained === "是") projectRecommendForm.value.quickRecommendation.push("保值");
      if (resData.tagList?.length) projectRecommendForm.value.tagRecommendation = resData.tagList;
      if (resData.adcodeList?.length && resData.adcodeList?.length === 1 && resData.adcodeList.includes("210100")) {
        projectRecommendForm.value.areaRecommendation = areaOptions?.value?.map((x) => {
          return x.regionCode;
        });
      } else {
        projectRecommendForm.value.areaRecommendation = resData.adcodeList?.length ? resData.adcodeList : [];
      }
      if (resData.developerList?.length) {
        // 开发商推荐
        projectRecommendForm.value.developersRecommendation = resData.developerList || [];
      }
      projectRecommendForm.value.recommendationConditionsList = [];
      if (resData.priceMax) {
        // 开发商推荐-单价
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "单价",
          rangeValue: [resData.priceMin || 0, resData.priceMax],
          min: 0,
          max: 50000,
          unit: "元",
        });
      } else {
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "单价",
          rangeValue: [0, 50000],
          min: 0,
          max: 50000,
          unit: "元",
        });
      }
      if (resData.floorMax) {
        // 开发商推荐-楼层
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "楼层",
          rangeValue: [resData.floorMin || 0, resData.floorMax],
          min: 0,
          max: 50,
          unit: "层",
        });
      }
      if (resData.areaMax) {
        // 开发商推荐-面积
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "面积",
          rangeValue: [resData.areaMin || 0, resData.areaMax],
          min: 0,
          max: 500,
          unit: "㎡",
        });
      }
      if (resData.ageMax) {
        // 开发商推荐-楼龄
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "楼龄",
          rangeValue: [resData.ageMin || 0, resData.ageMax],
          min: 0,
          max: 100,
          unit: "年",
        });
      }
      if (resData.totalMax) {
        // 开发商推荐-总价
        projectRecommendForm.value.recommendationConditionsList.push({
          conditionValue: "总价",
          rangeValue: [resData.totalMin || 0, resData.totalMax],
          min: 0,
          max: 1000,
          unit: "万元",
        });
      }
      if (resData.isAllCriteriaMet) projectRecommendForm.value.accordCondition = resData.isAllCriteriaMet;
    })
    .catch((error) => {
      console.log(error);
    });
};

const handleWarningCityPickerChange = (newValue) => {
  // select切换城市-监控预警
  currentWaringCity.value = newValue;
  initRiskMonitoringEarlyWarningValues(currentWaringCity.value);
  initRiskMonitoringEarlyWarning(currentWaringCity.value);
};

const handleMacroCityPickerChange = (newValue) => {
  initMacroeconomicDataStatistics()
};

const handleStockCityPickerChange = (newValue) => {
  // select切换城市-监控预警
  console.log(newValue, "new");
};

const handleNetCityPickerChange = () => {
  initOnlineSignatureStatisticsQuery(currentNetCity.value);
};

const handleDevelopCityPickerChange = (newValue) => {
  // select切换城市-监控预警
  currentDevelopCity.value = newValue;
  initDealListData(currentDevelopCity.value);
};

const handleHouseTypeCityPickerChange = (newValue) => {
  initProductAndBuyerRelationship()
};

const handleHouseTypeRangePickerChange = (item) => {
  // select切换日期类型-供应情况
  currentHouseTypeRange.value = item;
  selectedHouseTypeDate.value = "";
};
const resetFiltrate = () => {
  // 重置筛选条件
  projectRecommendForm.value = {
    quickRecommendation: [], // 快速推荐
    projectName: "", // 项目名称
    tagRecommendation: [], // 标签推荐
    areaRecommendation: [], // 区域推荐
    developersRecommendation: [], // 开发商推荐
    accordCondition: 1, // 满足条件类型
    recommendationConditionsList: [
      // 推荐条件list
      {
        conditionValue: "单价",
        rangeValue: [0, 50000],
        min: 0,
        max: 50000,
        unit: "元",
      },
    ],
  };
};
const houseTagValues = ref([]);
const personTagValues = ref([]);
const changeFn = (res, targetData) => {
  return JSON.parse(JSON.stringify(res));
};

const addProjectCommendCondition = () => {
  // 项目推荐-添加条件
  if (projectRecommendForm.value.recommendationConditionsList?.length === recommendationConditionsSelectList.value?.length) {
    return ElMessage({
      message: "推荐条件已达上限",
      type: "warning",
    });
  }
  projectRecommendForm.value.recommendationConditionsList.push({
    conditionValue: "",
    rangeValue: [0, 0],
    min: 0,
    max: 0,
    unit: "",
  });
};

const deleteRecommendationCondition = (item, index) => {
  // 删除推荐条件
  projectRecommendForm.value.recommendationConditionsList = projectRecommendForm.value.recommendationConditionsList?.filter((x, i) => i !== index);
  publicHandleRecommendationConditionsSelectListDisabledStatus();
};

const recommendationConditionItemChange = (item, index) => {
  // 切换推荐条件
  const tempObj = recommendationConditionsSelectList.value.find((x) => x.value === item);
  projectRecommendForm.value.recommendationConditionsList[index].max = tempObj.max;
  projectRecommendForm.value.recommendationConditionsList[index].unit = tempObj.unit;
  publicHandleRecommendationConditionsSelectListDisabledStatus();
};

const publicHandleRecommendationConditionsSelectListDisabledStatus = () => {
  // 公共处理项目推荐-推荐条件-禁用逻辑
  const isSelectedList = projectRecommendForm.value.recommendationConditionsList?.map((x) => x.conditionValue) || [];
  if (isSelectedList?.length) {
    recommendationConditionsSelectList.value.forEach((x) => {
      x.disabled = isSelectedList.includes(x.value);
    });
  }
};

const initRecommendTableData = (cityCode, pageInfo) => {
  // 项目推荐-推荐列表
  const priceObj = projectRecommendForm.value.recommendationConditionsList?.find((x) => x.conditionValue === "单价");
  const floorObj = projectRecommendForm.value.recommendationConditionsList?.find((x) => x.conditionValue === "楼层");
  const areaObj = projectRecommendForm.value.recommendationConditionsList?.find((x) => x.conditionValue === "面积");
  const ageObj = projectRecommendForm.value.recommendationConditionsList?.find((x) => x.conditionValue === "楼龄");
  const totalObj = projectRecommendForm.value.recommendationConditionsList?.find((x) => x.conditionValue === "总价");
  getRealEstateRecommendProjects({
    pageSize: pageInfo.pageSize,
    pageNum: pageInfo.pageNum,
    isAllCriteriaMet: projectRecommendForm.value.accordCondition || 1,
    isSchool: projectRecommendForm.value.quickRecommendation.includes("学区") ? "是" : undefined,
    isTransportConvenient: projectRecommendForm.value.quickRecommendation.includes("交通") ? "是" : undefined,
    isValueMaintained: projectRecommendForm.value.quickRecommendation.includes("保值") ? "是" : undefined,
    tagList: projectRecommendForm.value.tagRecommendation || [],
    adcodeList: projectRecommendForm.value.areaRecommendation || [],
    developerList: projectRecommendForm.value.developersRecommendation || [],
    priceMin: priceObj ? priceObj.rangeValue[0] : undefined,
    priceMax: priceObj ? priceObj.rangeValue[1] : undefined,
    floorMin: floorObj ? floorObj.rangeValue[0] : undefined,
    floorMax: floorObj ? floorObj.rangeValue[1] : undefined,
    areaMin: areaObj ? areaObj.rangeValue[0] : undefined,
    areaMax: areaObj ? areaObj.rangeValue[1] : undefined,
    ageMin: ageObj ? ageObj.rangeValue[0] : undefined,
    ageMax: ageObj ? ageObj.rangeValue[1] : undefined,
    totalMin: totalObj ? totalObj.rangeValue[0] : undefined,
    totalMax: totalObj ? totalObj.rangeValue[1] : undefined,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.records?.length) {
        recommendColumnData.value = [
          {
            label: "序号",
            key: "index",
            width: 40,
          },
          {
            label: "项目名称",
            key: "xmmc",
            width: 80,
          },
          {
            label: "地区",
            key: "xzqhbm",
            width: 80,
          },
          {
            label: "开发商",
            key: "kfsmc",
            width: 60,
          },
          {
            label: "物业",
            key: "wy",
            width: 80,
          },
          {
            label: "卧室数",
            key: "wss",
            width: 70,
          },
          {
            label: "厅数",
            key: "ts",
            width: 70,
          },
          {
            label: "单价(元)",
            key: "dj",
            width: 80,
          },
          {
            label: "面积(㎡)",
            key: "mj",
            width: 80,
          },
          {
            label: "保值情况",
            key: "bzqk",
            width: 80,
          },
          {
            label: "保值预测",
            key: "bzyc",
            width: 80,
          },
        ];
        recommendTableListData.value = resData?.records?.map((x, i) => {
          return {
            ...x,
            index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1),
          };
        });
        recommendTableInfo.value.total = resData?.total;
        recommendTableInfo.value.currentPage = pageInfo.pageNum;
      } else {
        recommendColumnData.value = [];
        recommendTableInfo.value.total = resData?.total;
        recommendTableInfo.value.currentPage = pageInfo.pageNum;
      }
    })
    .catch((error) => {
      console.log(error);
      recommendColumnData.value = [];
      recommendTableInfo.value.total = 0;
      recommendTableInfo.value.currentPage = 1;
    });
};

const mapNameChange = (data) => {
  // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? "" : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? "210000" : data.cityCode;
  currentWaringCity.value = cityObj.value.code;
  currentStockCity.value = cityObj.value.code;
  currentNetCity.value = cityObj.value.code;
  currentDevelopCity.value = cityObj.value.code;
  currentHouseTypeCity.value = cityObj.value.code;
  currentMacroCity.value = cityObj.value.code;
  mapList.value.forEach((x) => {
    if (x.code === data.cityCode) {
      x.selected = true;
      if (data.cancelCurrentCity) {
        x.selected = false;
      }
    } else {
      x.selected = false;
    }
  });
  initPage(cityObj.value.code);
};

const deleteRegulatoryFactorCondition = (item, index) => {
  // 删除调控因子
  forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList = forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList?.filter(
    (x, i) => i !== index
  );
  let tempObj = regulatoryFactorConditionsSelectList.value?.find((x) => item.conditionValue === x.value);
  tempObj.disabled = !tempObj.disabled;
};

const regulatoryFactorConditionItemChange = (item) => {
  // 切换调控因子
  let tempObj = regulatoryFactorConditionsSelectList.value?.find((x) => item.conditionValue === x.value);
  tempObj.disabled = !tempObj.disabled;
};

const addRegulatoryFactorCondition = () => {
  // 模拟预测分析-添加条件
  forecastSimulationAnalysisForm.value.regulatoryFactorConditionsList.push({
    conditionValue: "",
    rangeValue: [0, 0],
    min: 0,
    max: 100,
    unit: "%",
  });
};

const initForecastTrendAfterRegulationData = () => {
  // 预测模拟分析-预测调控后走势
  forecastTrendAfterRegulation.value = [
    {
      label: "销售面积",
      forecast: 0,
      afterRegulation: 1500000,
      sum: 2000000,
      unit: "㎡",
      percentage: 10,
    },
    {
      label: "销售均价",
      forecast: 150000,
      afterRegulation: 200000,
      sum: 1000000,
      unit: "￥",
      percentage: 15,
    },
    {
      label: "销售套数",
      forecast: 1200000,
      afterRegulation: 3000000,
      sum: 3500000,
      unit: "套",
      percentage: -10,
    },
  ];
};

const initPolicyListData = (cityCode) => {
  // 网签统计查询
  getRealEstateAnalyzePolicyImpact({adcode: cityCode})
    .then(async (res) => {
      const resData = res?.data;
      if (resData?.length) {
        policyTableListData.value = resData?.map((x, i) => {
          return {
            id: x.id,
            title: x.zcnr,
            publishTime: x.fbsj,
            policyValidityTime: x.zcsx,
            isChecked: i === 0,
          };
        });
        policyColumnData.value = [
          {
            label: "序号",
            type: "index",
            width: 40,
          },
          {
            label: "项目名称",
            key: "title",
            width: 70,
          },
          {
            label: "销售面积",
            key: "publishTime",
            width: 65,
          },
          {
            label: "销售套数",
            key: "policyValidityTime",
            width: 65,
          },
        ];

        const tempPolicyImpactForecastData = await initPolicyImpactForecastData(cityCode, [policyTableListData.value?.[0]?.title]); // 政策影响预测
        initHousePropertyProjecForecastData(cityObj.value.code, [policyTableListData.value?.[0]?.title]); // 房地产项目销售/价格预测
        publicHandlePolicyImpactForecastData(tempPolicyImpactForecastData, policyTableListData.value.slice(0, 1));
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const initDealListData = (cityCode) => {
  // 开发商成交情况统计
  const params = {
    xzqhdm: currentDevelopCity.value == "all" ? "210000" : currentDevelopCity.value,
  };
  developerTransactionStatistics(params)
    .then((res) => {
      const resData = res?.data;
      if (resData?.length) {
        dealTableListData.value = resData?.map((x, i) => {
          const mjNum = x?.xsmiData?.numerical;
          const mjYoy = x?.xsmiData?.yoy || 0;
          const mjChain = x?.xsmiData?.chain || 0;
          const tsNum = x?.xstsData?.numerical;
          const tsYoy = x?.xstsData?.yoy || 0;
          const tsChain = x?.xstsData?.chain || 0;
          return {
            title: x.xmmc,
            publishTime: `${mjNum}㎡ 同比:${mjYoy}% 环比:${mjChain}%`,
            policyValidityTime: `${tsNum}㎡ 同比:${tsYoy}% 环比:${tsChain}%`,
          };
        });
        dealColumnData.value = [
          {
            label: "序号",
            type: "index",
            width: 40,
          },
          {
            label: "开发商",
            key: "title",
            width: 70,
          },
          {
            label: "成交套数",
            key: "publishTime",
            width: 65,
          },
          {
            label: "成交面积",
            key: "policyValidityTime",
            width: 65,
          },
        ];
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const initPolicyImpactForecastData = (cityCode, policyList = []) => {
  // 政策影响预测
  return new Promise((resolve) => {
    getRealEstateForecastPolicySales({
      adcode: cityCode,
      requestType: currentPolicyImpactAnalysisForecastTab.value,
      policyList,
    })
      .then((res) => {
        const resData = res?.data;
        if (resData) {
          resolve(resData);
        } else {
          resolve(false);
        }
      })
      .catch((error) => {
        console.log(error);
        resolve(false);
      });
  });
};

const publicHandlePolicyImpactForecastData = (resData, checkList) => {
  // 政策影响预测-公共处理方法
  if (resData) {
    linePolicyImpactForecastData.value.markAreaData = [];
    linePolicyImpactForecastData.value.xAxisData = [0, ...resData?.dateList];
    linePolicyImpactForecastData.value.legendData = [
      {
        name: "未干预",
        itemStyle: {
          color: "#5ABE52",
        },
      },
      {
        name: "干预",
        itemStyle: {
          color: "#0E81FF",
        },
      },
    ];
    linePolicyImpactForecastData.value.seriesData = [
      [0, ...resData?.gyList],
      [0, ...resData?.ungyList],
    ];
    const tempXAxisData = linePolicyImpactForecastData.value.xAxisData;
    let forecastIndex = 0;
    const currentYearMonthDate = new Date(`${currentYear.value}-${currentMonth.value}`).getTime();
    for (let i = 0; i < tempXAxisData?.length; i++) {
      if (new Date(tempXAxisData[i]).getTime() >= currentYearMonthDate) {
        forecastIndex = i + 1;
        break;
      }
    }
    checkList.forEach((item, index) => {
      if (item.policyValidityTime.indexOf("-") !== -1) {
        const tempTimeRangeArray = item.policyValidityTime.split("-");
        const tempStartTime = tempTimeRangeArray[0].split(".");
        const tempEndTime = tempTimeRangeArray[1].split(".");
        const startTime = `${tempStartTime[0]}-${tempStartTime[1]}`;
        const endTime = `${tempEndTime[0]}-${tempEndTime[1]}`;
        const startTimeDate = new Date(startTime).getTime();
        const endTimeDate = new Date(endTime).getTime();
        const xAxisStartDate = new Date(tempXAxisData[1]).getTime();
        const xAxisEndDate = new Date(tempXAxisData[tempXAxisData?.length - 1]).getTime();
        linePolicyImpactForecastData.value.markAreaData.push([
          {
            name: item?.title,
            xAxis: startTimeDate < xAxisStartDate ? 0 : startTime,
          },
          {
            xAxis: endTimeDate > xAxisEndDate ? tempXAxisData[tempXAxisData?.length - 1] : endTime,
          },
        ]);
      }
    });
    // if (new Date(tempXAxisData[forecastIndex]).getTime() < new Date(tempXAxisData[tempXAxisData?.length - 1]).getTime())
    linePolicyImpactForecastData.value.markAreaData.push([
      {
        name: "预测",
        xAxis: tempXAxisData[forecastIndex],
      },
      {
        xAxis: tempXAxisData[tempXAxisData?.length - 1],
      },
    ]);
  }
};

const initHousePropertyProjecForecastData = (cityCode, policyList) => {
  // 房地产项目销售/价格预测
  getRealEstateAnalyzeImpactForecast({
    adcode: cityCode,
    requestType: currentPolicyImpactAnalysisHousePropertyForecastTab.value,
    saleType: currentHousePropertyProjectSalesForecastTab.value,
    startTime: housePropertyForecastTimeFiltrate.value[0],
    endTime: housePropertyForecastTimeFiltrate.value[1],
    policyList,
  })
    .then((res) => {
      const resData = res?.data;
      if (resData?.topList?.length) {
        barHousePropertyProjectSalesForecastData.value.xAxisData = [];
        barHousePropertyProjectSalesForecastData.value.seriesData = [[], []];
        resData?.topList?.forEach((x) => {
          barHousePropertyProjectSalesForecastData.value.xAxisData.push(x.name);
          barHousePropertyProjectSalesForecastData.value.seriesData[0].push(x.ungySum);
          barHousePropertyProjectSalesForecastData.value.seriesData[1].push(x.gySum);
        });

        barHousePropertyProjectPriceForecastData.value.xAxisData = [];
        barHousePropertyProjectPriceForecastData.value.seriesData = [[], []];
        resData?.jjList?.forEach((x) => {
          barHousePropertyProjectPriceForecastData.value.xAxisData.push(x.name);
          barHousePropertyProjectPriceForecastData.value.seriesData[0].push(x.wgyXsjj);
          barHousePropertyProjectPriceForecastData.value.seriesData[1].push(x.gyXsjj);
        });
      }
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
    });
};

const initAreasList = (cityCode) => {
  // 获取当前市区list
  getSupplyDemandGetRegion({adcode: cityCode})
    .then((res) => {
      let resData = res?.data;
      if (resData?.length) {
        resData.shift();
        areaOptions.value = resData;
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const initDevelopersList = (cityCode) => {
  // 获取开发商推荐下拉选list
  getRealEstateDeveloperList({adcode: cityCode})
    .then((res) => {
      let resData = res?.data;
      if (resData?.length) {
        developersRecommendationOptions.value = resData?.map((x) => {
          return {
            label: x,
            value: x,
          };
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const initRiskMonitoringEarlyWarningValues = (cityCode) => {
  // 房地产市场交易监测分析-房地产市场风险监控预警值
  const params = {
    xzqhdm: currentWaringCity.value == "all" ? "210000" : currentWaringCity.value,
  };
  riskMonitoringEarlyWarningValues(params).then((res) => {
    const resData = res?.data;
    const values = riskWarningValues.value;
    values.forEach((item) => {
      switch (item.label) {
        case "平均房价指数":
          item.value = resData?.jgzs;
          break;
        case "租售比":
          item.value = resData?.szb;
          break;
        case "新房供应量":
          item.value = resData?.supplyNum;
          break;
        case "二手房均价":
          item.value = resData?.xzcjjj;
          break;
        case "商业贷款利率年度涨幅":
          item.value = resData?.sydkllzf;
          break;
        default:
          break;
      }
    });
    riskWarningValues.value = values;
  });
};

const initRiskMonitoringEarlyWarning = (cityCode) => {
  // 房地产市场交易监测分析-房地产市场风险监控预警图
  const params = {
    xzqhdm: currentWaringCity.value == "all" ? "210000" : currentWaringCity.value,
  };
  riskMonitoringEarlyWarning(params)
    .then((res) => {
      const resData = res?.data;
      const resData2 = resData[0].jgzs;
      const resData3 = resData[1].zsb;
      const resData4 = resData[2].supplynum;
      const resData5 = resData[3].esfcjlandjj;
      const resData6 = resData[4].gjjandsydk;
      housePropertyProjectSalesTrendData.value.seriesData = resData2?.Y;
      housePropertyProjectSalesTrendData.value.xAxisData = resData2?.X;
      salesFactorImportanceData.value.seriesData = resData3?.Y;
      salesFactorImportanceData.value.xAxisData = resData3?.X;
      housePropertyUnitPriceTrendData.value.seriesData = resData4?.Y;
      housePropertyUnitPriceTrendData.value.xAxisData = resData4?.X;
      unitPriceFactorImportanceData.value.seriesData = resData5?.Y;
      unitPriceFactorImportanceData.value.xAxisData = resData5?.X;
      housePropertyTaxRateTrendData.value.seriesData = resData6?.Y;
      housePropertyTaxRateTrendData.value.xAxisData = resData6?.X;
    })
    .catch((error) => {
      console.log(error);
    })
    .finally((_) => {
      nextTick(() => {
        // housePropertyProjectSalesTrend.value?.updateChart();
        // salesFactorImportance.value?.updateChart();
        // housePropertyUnitPriceTrend.value?.updateChart();
        // unitPriceFactorImportance.value?.updateChart();
        // housePropertyTaxRateTrend.value?.updateChart();
      });
    });
};

const initInventoryDepletionCycle = (cityCode) => {
  // 房地产市场交易监测分析-各地库存及空置情况统计
  const params = {
    xzqhdm: currentStockCity.value == "all" ? "210000" : currentStockCity.value,
  };
  inventoryDepletionCycle(params).then((res) => {
    const resData = res?.data;

    let paramsData = {
      result: resData?.tValue,
      nameList: resData?.name,
    };
    personHouseData.personHouseCommodityData = paramsData;
  });
};

const initOnlineSignatureStatisticsQuery = (cityCode) => {
  // 房地产市场交易监测分析-网签统计查询
  const params = {
    mjlx: selectedHouseArea.value == 0 ? "" : selectedHouseArea.value,
    xzqhdm: currentNetCity.value == "all" ? "210000" : currentNetCity.value,
    type: selectedHouseType.value == 0 ? "" : selectedHouseType.value,
  };
  onlineSignatureStatisticsQuery(params).then((res) => {
    const resData = res?.data;
    policyTableListData.value = resData?.map((x, i) => {
      const mjNum = x?.xsmiData?.numerical;
      const mjYoy = x?.xsmiData?.yoy || 0;
      const mjChain = x?.xsmiData?.chain || 0;
      const tsNum = x?.xstsData?.numerical;
      const tsYoy = x?.xstsData?.yoy || 0;
      const tsChain = x?.xstsData?.chain || 0;
      return {
        title: x.xmmc,
        publishTime: `${mjNum}㎡ 同比:${mjYoy}% 环比:${mjChain}%`,
        policyValidityTime: `${tsNum}㎡ 同比:${tsYoy}% 环比:${tsChain}%`,
      };
    });
  });
  policyColumnData.value = [
    {
      label: "序号",
      type: "index",
      width: 40,
    },
    {
      label: "项目名称",
      key: "title",
      width: 70,
    },
    {
      label: "销售面积",
      key: "publishTime",
      width: 65,
    },
    {
      label: "销售套数",
      key: "policyValidityTime",
      width: 65,
    },
  ];
};

const initDeveloperTransactionStatistics = (cityCode) => {
  // 房地产市场交易监测分析-开发商成交情况统计
  const params = {
    xzqhdm: currentDevelopCity.value == "all" ? "210000" : currentDevelopCity.value,
  };
  developerTransactionStatistics(params).then((res) => {
    const resData = res?.data;
  });
};

const initMacroeconomicDataStatistics = (cityCode) => {
  // 房地产市场交易监测分析-宏观经济数据统计
  const params = {
    xzqhdm: currentMacroCity.value == "all" ? "210000" : currentMacroCity.value,
    type: currentEconomicDataStatisticsTab.value,
    startYearMonth: selectedMacroDate.value[0],
    endYearMonth: selectedMacroDate.value[1],
  };
  macroeconomicDataStatistics(params).then((res) => {
    const resData = res?.data;
    if (resData?.name?.length) {
      macroEconomicDataStatisticsData.value.areaNameList = resData?.name;
    }
    if (resData?.tValue?.length) {
      macroEconomicDataStatisticsData.value.series = resData?.tValue;
    }
  });
};

//   const changeTableDataCheckStatus = async (obj) => { // 政策列表checkbox变动
//     if (obj.type === 'all') {
//       policyTableListData.value.forEach(x => {
//         x.isChecked = obj.value
//       })
//     } else { // 切换单行选中状态
//       let tempRow = policyTableListData.value?.find(x => x.id === obj.id)
//       tempRow.isChecked = obj.value
//     }
//     const tempCheckedPolicyList = policyTableListData.value?.filter(x => x.isChecked)
//     const tempCheckedPolicyNameList = tempCheckedPolicyList.map(x => x.title)
//     const resData = await initPolicyImpactForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 政策影响预测
//     initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList) // 房地产项目销售/价格预测
//     publicHandlePolicyImpactForecastData(resData, tempCheckedPolicyList);
//     linePolicyImpactForecastRef.value.updateChart()
//   }

const houseTags = ref({
  hxjg: ["普通住房", "复式", "错层", "平层"],
  hx: ["一居室", "二居室", "三居室", "四居室", "五居室"],
  jzys: ["高层", "小高层", "洋房"],
});
const handleHouseTags = (val) => {
  // 房屋标签
  const result = {};

  for (const item of val) {
    if (Array.isArray(item)) {
      const [key, value] = item;
      if (!result[key]) {
        result[key] = [];
      }
      result[key].push(value);
    } else {
      for (const [key, value] of Object.entries(item)) {
        if (!result[key]) {
          result[key] = [];
        }
        result[key].push(value);
      }
    }
  }

  houseTags.value = result;
  initProductAndBuyerRelationship();
};

const changePolicyImpactAnalysisForecastTab = async (val) => {
  // 政策影响预测-tab切换
  const tempCheckedPolicyList = policyTableListData.value?.filter((x) => x.isChecked);
  const tempCheckedPolicyNameList = tempCheckedPolicyList.map((x) => x.title);
  const resData = await initPolicyImpactForecastData(cityObj.value.code, tempCheckedPolicyNameList); // 政策影响预测
  publicHandlePolicyImpactForecastData(resData, tempCheckedPolicyList);
  linePolicyImpactForecastRef.value.updateChart();
};

const changePolicyImpactAnalysisHousePropertyForecastTab = (val) => {
  // 政策影响预测-房地产项目预测-tab切换
  const tempCheckedPolicyNameList = policyTableListData.value?.filter((x) => x.isChecked)?.map((x) => x.title);
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList); // 房地产项目销售预测
};

const changeHousePropertyProjectSalesForecastTab = (val) => {
  // 政策影响预测-房地产项目价格预测-tab切换
  const tempCheckedPolicyNameList = policyTableListData.value?.filter((x) => x.isChecked)?.map((x) => x.title);
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList); // 房地产项目销售预测
};

const changeForecastSimulationAnalysisTimeFiltrate = (val) => {
  // 模拟预测分析-月范围筛选
  console.log(val);
};

const changeHousePropertyForecastTimeFiltrate = (val) => {
  // 政策影响分析-房地产项目预测-月范围筛选
  const tempCheckedPolicyNameList = policyTableListData.value?.filter((x) => x.isChecked)?.map((x) => x.title);
  initHousePropertyProjecForecastData(cityObj.value.code, tempCheckedPolicyNameList); // 房地产项目销售预测
};

const changeMacroEconomicDataStatisticsTab = (val) => {
  // 宏观经济数据统计
  currentEconomicDataStatisticsTab.value = val;
  initMacroeconomicDataStatistics(currentMacroCity.value);
};

const monthPickerDisabledOptions = (time) => {
  // 月范围禁用校验
  let before = monthRangeDisabledOption.value[0]; // 格式为 '年-月'
  let beforeDate = new Date(before).getTime();
  let after = monthRangeDisabledOption.value[1]; // 格式为 '年-月'
  let afterDate = new Date(after).getTime();
  return time.getTime() < beforeDate || time.getTime() > afterDate;
};

const changeModuleLeft = (value, whichOne) => { // 左侧模块selectchange
  switch (whichOne) {
    case 'one':
      initHousePropertyMarketSalesConditionData() // 房地产市场交易监测分析
      break;
  }
}

const changeHousePropertyMarketSalesConditionTab = (value) => { // 房地产市场交易监测分析-tab-change
  initHousePropertyMarketSalesConditionData()
}

const initHousePropertyMarketSalesConditionData = () => { // 房地产市场销售情况
  getSalesSituation({
    dimension: housePropertyMarketSalesCondition.value, timeDimension: housePropertyMarketSalesConditionTab.value, xzqhdms: ['210000']
  }).then(res => {
    const resData = res?.data
    housePropertyMarketSalesConditionData.value.xAxisData = resData?.X
    housePropertyMarketSalesConditionData.value.seriesData = resData?.Y.map(x => {
      return {
        type: 'line',
        smooth: true,
        showSymbol: false,
        data: x.numericalMap.map((y, yIndex) => {
          return {
            value: y,
            percentageYoy: x?.yoyMap?.[yIndex],
            percentageMom: x?.momMap?.[yIndex]
          }
        }),
        name: x.name
      }
    })
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (housePropertyMarketSalesConditionData.value.seriesData?.length) {
      nextTick(() => {
        housePropertyMarketSalesConditionDomRef.value?.updateChart();
      })
    }
  })
}

const initPage = (cityCode, date) => {
  initRiskMonitoringEarlyWarningValues(cityCode); // 房地产市场风险监控预警值
  initRiskMonitoringEarlyWarning(cityCode); // 房地产市场风险监控预警图
  initInventoryDepletionCycle(cityCode); // 各地库存及空置情况统计
  initOnlineSignatureStatisticsQuery(cityCode); // 网签统计查询
  initDeveloperTransactionStatistics(cityCode); // 开发商成交情况统计
  initMacroeconomicDataStatistics(cityCode); // 宏观经济数据统计
  initHousePropertyLandSupplyStatistics(cityCode, date);
  // initMacroEconomicDataStatistics(cityCode, date) // 宏观经济数据统计
  initProductAndBuyerRelationship(cityCode, date); // 主流户型推荐
  // personHouseCommodity();
  // initHousePropertyProjectSalesTrendAnalysis(cityCode) // 房地产市场风险监控预警-总的
  initRecommendTableData(cityCode, {pageNum: 1, pageSize: 10}); // 项目推荐-推荐列表
  initForecastTrendAfterRegulationData(cityCode); // 预测模拟分析-预测调控后走势
  // initPolicyListData(cityCode) // 网签统计查询
  initDealListData(cityCode); // 开发商成交情况统计
  initAreasList(cityCode); // 获取当前市区list
  initDevelopersList(cityCode); // 获取开发商推荐下拉选list
  initHousePropertyMarketSalesConditionData() // 房地产市场销售情况
};

onMounted(() => {
  const houseSelectAll = makeData([], [], houseOptions.value);
  const personSelectAll = makeData([], [], personOptions.value);
  houseTagValues.value = changeFn(houseSelectAll, houseTagValues.value);
  personTagValues.value = changeFn(personSelectAll, personSelectAll.value);
  const date = new Date();
  const current = date.getFullYear();
  currentYearRange.value = [current - 2, current];
  currentYearMonthDay.value = `${current}年${date.getMonth() + 1}月${date.getDate()}日`;
  // currentYearMonthDay.value = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
  currentYear.value = date.getFullYear();
  currentMonth.value = date.getMonth() + 1;
  const lastMonth = currentMonth.value - 1 < 10 ? `0${currentMonth.value - 1}` : `${currentMonth.value - 1}`;
  const tempCurrentMonth = currentMonth.value < 10 ? `0${currentMonth.value}` : `${currentMonth.value}`;
  selectedHouseTypeDate.value = `${currentYear.value}`;
  if (currentMonth.value === 1) {
    selectedMacroDate.value = [`${currentYear.value - 1}-12`, `${currentYear.value}-${tempCurrentMonth}`];
  } else {
    selectedMacroDate.value = [`${currentYear.value}-${lastMonth}`, `${currentYear.value}-${tempCurrentMonth}`];
  }
  console.log(selectedMacroDate.value, 23232323);
  if (currentMonth.value === 12) {
    forecastSimulationAnalysisTimeFiltrate.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`];
    housePropertyForecastTimeFiltrate.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`];
    monthRangeDisabledOption.value = [`${currentYear.value + 1}-01`, `${currentYear.value + 2}-01`];
  } else {
    forecastSimulationAnalysisTimeFiltrate.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`];
    housePropertyForecastTimeFiltrate.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`];
    monthRangeDisabledOption.value = [`${currentYear.value}-${tempCurrentMonth}`, `${currentYear.value + 1}-${tempCurrentMonth}`];
  }

  initPage(cityObj.value.code, currentYearRange.value);
});
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }

    .top-tab {
      display: flex;

      .top-tab-left {
        position: absolute;
        top: 33px;
        left: 200px;
        display: flex;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        &-item:first-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
        }

        &-item:last-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
          margin-left: -25px;
        }
      }

      .top-tab-right {
        position: absolute;
        top: 33px;
        right: 375px;
        display: flex;
        align-items: center;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("@/assets/img/housePropertyAnalysis/forecast/chosen-top-tab-bg.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        span {
          position: absolute;
          font-size: 15px;
          right: -150px;
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 50px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .next-page-btn {
      position: absolute;
      height: calc(100vh - 111px);
      left: 10px;
      font-size: 35px;

      svg {
        cursor: pointer;
      }
    }

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }
    }

    .module-title-content-middle-line {
      width: 100% px;
      border: 1px solid;
      margin-top: 6px;
      border-image: linear-gradient(297deg,
      rgba(97, 228, 255, 0),
      rgba(50, 197, 255, 1),
      rgba(102, 255, 255, 1),
      rgba(50, 197, 255, 1),
      rgba(50, 197, 255, 0)) 1 1;
    }

    .main-content-left-module {
      width: 100%;
      height: 300px;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      padding: 10px 11px 10px 11px;
      box-sizing: border-box;
      position: relative;

      .title-row {
        width: auto;
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      .main-content-left-module-select {
        width: 150px;
        margin-left: 10px;

        /deep/ .el-select__wrapper {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .main-content-left-module-tabs {
        position: relative;
        margin-left: 10px;

        :deep(.el-tabs) {
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 10px;
            font-size: 12px;
            height: 25px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }
    }

    .main-content-left-module-one {

    }

    .house-property-project-sales-trend-forecast {
      background: url("@/assets/img/housePropertyAnalysis/forecast/module-bg-left-top-648-470.png");
      background-size: 100% 100%;
      padding: 10px 11px 10px 11px;
      height: fit-content;
      box-sizing: border-box;
      position: relative;

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .house-property-land-supply-statistics__right-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 92px;
        height: 69px;
        box-sizing: border-box;
        cursor: pointer;

        p:nth-of-type(1) {
          font-size: 12px;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          font-weight: bold;
        }

        p:nth-of-type(3) {
          font-size: 9px;
          display: flex;
          align-items: center;

          span {
            margin-right: 5px;
          }
        }
      }

      -item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        width: 92px;
        height: 69px;
        box-sizing: border-box;
        cursor: pointer;

        p:nth-of-type(1) {
          font-size: 12px;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          font-weight: bold;
        }

        p:nth-of-type(3) {
          font-size: 9px;
          display: flex;
          align-items: center;

          span {
            margin-right: 5px;
          }
        }
      }

      .house-property-project-sales-trend {
        width: 100%;
      }
    }

    /deep/ .multiple-condition-list {
      .el-form-item__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .multiple-condition-list-item {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;

          .multiple-condition-list-item-delete {
            position: absolute;
            left: -20px;
          }

          .el-select {
            min-width: 80px;
            width: 80px;
            margin-right: 20px;

            .el-select__wrapper {
              background: #001a35;
              box-shadow: inset 0px 0px 8px 0px #3d7fff;
              border-radius: 8px;
              border: 1px solid #03dbff;

              .el-select__placeholder {
                color: white;
              }
            }
          }

          .el-slider {
            width: 40%;

            .el-slider__runway {
              background-color: #06598d;

              .el-slider__bar {
                background-color: #1fb7ff;
              }
            }

            .el-slider__button {
              width: 10px;
              height: 10px;
              border: 0;
            }
          }

          .slider-range-input {
            display: flex;
            align-items: center;
            margin-left: 20px;

            .el-input__wrapper {
              background: #001a35;
              box-shadow: inset 0px 0px 8px 0px #3d7fff;
              border-radius: 8px;
              border: 1px solid #03dbff;

              .el-input__inner {
                width: 55px;
                height: 15px;
                font-size: 12px;
                color: white;
              }
            }

            > span:last-child {
              margin-left: 5px;
              white-space: nowrap;
            }
          }
        }
      }
    }

    /deep/ .btns-form-item {
      .el-button {
        height: 24px;
        border-radius: 8px;
        border: 0;
      }

      .el-button:last-child {
        background: linear-gradient(135deg, rgba(94, 158, 234, 0.15) 0%, #2f62cd 50%, #3065d1 100%);
        box-shadow: inset 0px 0px 8px 0px #3d7fff;
      }
    }

    .project-recommend {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      padding: 20px 11px 10px 11px;
      height: fit-content;
      box-sizing: border-box;
      position: relative;

      .project-recommend-filtrate {
        height: 225px;
        overflow-y: auto;

        /deep/ .el-form-item:nth-of-type(1) {
          .el-form-item__content {
            flex-wrap: nowrap;
            justify-content: space-between;

            .el-checkbox-group {
              .el-checkbox {
                color: white;

                .el-checkbox__input {
                  .el-checkbox__inner {
                    border: 1px solid #1fb7ff;
                    background-color: transparent;
                  }
                }

                .el-checkbox__input.is-checked {
                  .el-checkbox__inner {
                    background-color: #409eff;
                  }
                }
              }
            }
          }
        }

        /deep/ .el-form-item {
          margin-bottom: 5px;

          .el-form-item__label {
            color: white;
            width: 90px;
          }

          .project-recommend-filtrate-name-search {
            position: relative;

            .project-recommend-filtrate-name-search-autocomplete {
              width: 200px;
              margin-left: 0px;

              .el-input__wrapper {
                min-height: 20px;
                height: 20px;
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 10px;
                border: 1px solid #03dbff;
                padding-right: 35px;

                .el-input__inner {
                  color: white;
                }

                .el-input__suffix .el-icon {
                  color: white;
                }
              }
            }

            .project-name-search-btn {
              position: absolute;
              right: 8px;
              top: 0;
              color: #00fbff;
              font-size: 12px;
              cursor: pointer;
            }
          }

          .reset-filtrate-btn {
            color: #00fbff;
            cursor: pointer;
          }

          .multiple-select {
            width: 66%;
            position: relative;

            .el-select__wrapper {
              background: #001a35;
              box-shadow: inset 0px 0px 8px 0px #3d7fff;
              border-radius: 8px;
              border: 1px solid #03dbff;
              height: 24px;
              min-height: 24px;
              width: 100%;

              .el-tag {
                height: 18px;
              }

              .el-select__suffix {
                .el-icon {
                  color: #00fbff;
                }
              }

              .el-select__placeholder {
                color: white;
              }
            }
          }

          .multiple-select:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -30px;
            width: 30px;
            height: 1px;
            background-color: #00f9fd;
          }

          .tag-multiple-select.multiple-select:after {
            width: 60px;
            right: -60px;
          }

          .tag-multiple-select.multiple-select:before {
            content: "";
            position: absolute;
            top: 12px;
            right: -30px;
            width: 1px;
            height: 74px;
            background-color: #00f9fd;
          }

          .accord-condition-type {
            display: flex;
            align-items: center;

            > span {
              white-space: nowrap;
              color: #00fbff;
              font-size: 12px;
            }

            .el-select {
              width: 90px;
              margin: 0 5px;

              .el-select__wrapper {
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 8px;
                border: 1px solid #03dbff;

                .el-select__placeholder {
                  color: white;
                }
              }
            }
          }
        }

        /deep/ .tag-form-item .el-form-item__content {
          display: flex;
          justify-content: space-between;
        }
      }

      .recommend-table-list-module {
        margin-top: 5px;

        /deep/ .el-table {
          height: 200px;
        }
      }
    }

    .house-type-recommend {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      padding: 16px 11px 10px 11px;
      height: fit-content;
      box-sizing: border-box;
      position: relative;
      margin-top: 20px;
      overflow: hidden;

      .house-property-sales-date {
        width: 180px;
        margin-left: 10px;
      }

      .title-row {
        width: auto;
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      &-cascader {
        display: flex;
        align-items: center;
      }

      :deep(.el-cascader) {
        margin: 10px;
        z-index: 1;
        width: fit-content;

        .el-input__wrapper {
          background: #001a35 !important;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;
        }

        .el-cascader__tags {
          flex-wrap: nowrap;
        }

        .el-tag {
          color: #fff;
          background-color: transparent !important;
          max-width: 67%;
        }
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .project-recommend-filtrate {
        height: 225px;
        overflow-y: auto;

        /deep/ .el-form-item:nth-of-type(1) {
          .el-form-item__content {
            flex-wrap: nowrap;
            justify-content: space-between;

            .el-checkbox-group {
              .el-checkbox {
                color: white;

                .el-checkbox__input {
                  .el-checkbox__inner {
                    border: 1px solid #1fb7ff;
                    background-color: transparent;
                  }
                }

                .el-checkbox__input.is-checked {
                  .el-checkbox__inner {
                    background-color: #409eff;
                  }
                }
              }
            }
          }
        }

        /deep/ .el-form-item {
          margin-bottom: 5px;

          .el-form-item__label {
            color: white;
            width: 90px;
          }

          .project-recommend-filtrate-name-search {
            position: relative;

            .project-recommend-filtrate-name-search-autocomplete {
              width: 200px;
              margin-left: 0px;

              .el-input__wrapper {
                min-height: 20px;
                height: 20px;
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 10px;
                border: 1px solid #03dbff;
                padding-right: 35px;

                .el-input__inner {
                  color: white;
                }

                .el-input__suffix .el-icon {
                  color: white;
                }
              }
            }

            .project-name-search-btn {
              position: absolute;
              right: 8px;
              top: 0;
              color: #00fbff;
              font-size: 12px;
              cursor: pointer;
            }
          }

          .reset-filtrate-btn {
            color: #00fbff;
            cursor: pointer;
          }

          .multiple-select {
            width: 66%;
            position: relative;

            .el-select__wrapper {
              background: #001a35;
              box-shadow: inset 0px 0px 8px 0px #3d7fff;
              border-radius: 8px;
              border: 1px solid #03dbff;
              height: 24px;
              min-height: 24px;
              width: 100%;

              .el-tag {
                height: 18px;
              }

              .el-select__suffix {
                .el-icon {
                  color: #00fbff;
                }
              }

              .el-select__placeholder {
                color: white;
              }
            }
          }

          .multiple-select:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -30px;
            width: 30px;
            height: 1px;
            background-color: #00f9fd;
          }

          .tag-multiple-select.multiple-select:after {
            width: 60px;
            right: -60px;
          }

          .tag-multiple-select.multiple-select:before {
            content: "";
            position: absolute;
            top: 12px;
            right: -30px;
            width: 1px;
            height: 74px;
            background-color: #00f9fd;
          }

          .accord-condition-type {
            display: flex;
            align-items: center;

            > span {
              white-space: nowrap;
              color: #00fbff;
              font-size: 12px;
            }

            .el-select {
              width: 90px;
              margin: 0 5px;

              .el-select__wrapper {
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 8px;
                border: 1px solid #03dbff;

                .el-select__placeholder {
                  color: white;
                }
              }
            }
          }
        }

        /deep/ .tag-form-item .el-form-item__content {
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .macro-economic-statistics {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module17@2x.png");
      background-size: 100% 100%;
      padding: 16px 11px 0 11px;
      height: 330px;
      box-sizing: border-box;
      position: relative;
      margin-top: 20px;

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-date {
        margin-left: 10px;
        z-index: 1;
        min-width: 160px;
        height: 22px;
        display: flex;
        align-items: center;
        background: #001a35;
        box-shadow: inset 0px 0px 8px 0px #3d7fff;
        border-radius: 8px;
        border: 1px solid #0839a7;

        .sales-icon {
          margin-left: 5px;
        }

        .sales-date {
          padding-left: 5px;
          font-size: 12px;
          color: #fff;
          line-height: 15px;
          white-space: nowrap;
        }
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .macro-economic-data-statistics-tabs {
        position: relative;

        :deep(.el-tabs) {
          position: absolute;
          left: 70px;
          top: 0;
          height: 46px;
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 10px;
            font-size: 10px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3d7fff;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0e5fff 0%, #00ffff 100%);
          }
        }
      }

      .project-recommend-filtrate {
        height: 225px;
        overflow-y: auto;

        /deep/ .el-form-item:nth-of-type(1) {
          .el-form-item__content {
            flex-wrap: nowrap;
            justify-content: space-between;

            .el-checkbox-group {
              .el-checkbox {
                color: white;

                .el-checkbox__input {
                  .el-checkbox__inner {
                    border: 1px solid #1fb7ff;
                    background-color: transparent;
                  }
                }

                .el-checkbox__input.is-checked {
                  .el-checkbox__inner {
                    background-color: #409eff;
                  }
                }
              }
            }
          }
        }

        /deep/ .el-form-item {
          margin-bottom: 5px;

          .el-form-item__label {
            color: white;
            width: 90px;
          }

          .project-recommend-filtrate-name-search {
            position: relative;

            .project-recommend-filtrate-name-search-autocomplete {
              width: 200px;
              margin-left: 0px;

              .el-input__wrapper {
                min-height: 20px;
                height: 20px;
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 10px;
                border: 1px solid #03dbff;
                padding-right: 35px;

                .el-input__inner {
                  color: white;
                }

                .el-input__suffix .el-icon {
                  color: white;
                }
              }
            }

            .project-name-search-btn {
              position: absolute;
              right: 8px;
              top: 0;
              color: #00fbff;
              font-size: 12px;
              cursor: pointer;
            }
          }

          .reset-filtrate-btn {
            color: #00fbff;
            cursor: pointer;
          }

          .multiple-select {
            width: 66%;
            position: relative;

            .el-select__wrapper {
              background: #001a35;
              box-shadow: inset 0px 0px 8px 0px #3d7fff;
              border-radius: 8px;
              border: 1px solid #03dbff;
              height: 24px;
              min-height: 24px;
              width: 100%;

              .el-tag {
                height: 18px;
              }

              .el-select__suffix {
                .el-icon {
                  color: #00fbff;
                }
              }

              .el-select__placeholder {
                color: white;
              }
            }
          }

          .multiple-select:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -30px;
            width: 30px;
            height: 1px;
            background-color: #00f9fd;
          }

          .tag-multiple-select.multiple-select:after {
            width: 60px;
            right: -60px;
          }

          .tag-multiple-select.multiple-select:before {
            content: "";
            position: absolute;
            top: 12px;
            right: -30px;
            width: 1px;
            height: 74px;
            background-color: #00f9fd;
          }

          .accord-condition-type {
            display: flex;
            align-items: center;

            > span {
              white-space: nowrap;
              color: #00fbff;
              font-size: 12px;
            }

            .el-select {
              width: 90px;
              margin: 0 5px;

              .el-select__wrapper {
                background: #001a35;
                box-shadow: inset 0px 0px 8px 0px #3d7fff;
                border-radius: 8px;
                border: 1px solid #03dbff;

                .el-select__placeholder {
                  color: white;
                }
              }
            }
          }
        }

        /deep/ .tag-form-item .el-form-item__content {
          display: flex;
          justify-content: space-between;
        }
      }
    }

    .middle-map {
      height: 400px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }
    }

    .forecast-simulation-analysis {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: fit-content;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/forecast/module-bg-left-bottom-648-464.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 10px 21px 0 21px;
      position: relative;
      margin-top: 20px;

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .forecast-simulation-analysis-main-content {
        width: 100%;
        flex: 1;
        height: calc(100% - 32px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .forecast-trend-aAfter-regulation {
          height: 235px;
          margin-top: 10px;
        }
      }

      /deep/ .el-form-item {
        margin-bottom: 5px;

        .el-form-item__label {
          color: white;
          width: 70px;
        }

        .multiple-select {
          width: 66%;
          position: relative;

          .el-select__wrapper {
            background: #001a35;
            box-shadow: inset 0px 0px 8px 0px #3d7fff;
            border-radius: 8px;
            border: 1px solid #03dbff;
            height: 24px;
            min-height: 24px;
            width: 100%;

            .el-tag {
              height: 18px;
            }

            .el-select__suffix {
              .el-icon {
                color: #00fbff;
              }
            }

            .el-select__placeholder {
              color: white;
            }
          }
        }

        .el-input__wrapper {
          .el-input__inner {
            width: 30px !important;
          }
        }
      }

      /deep/ .forecast-simulation-analysis-date-picker {
        position: absolute;
        right: 15px;
        top: 15px;
        width: 170px;
        height: 20px;
      }
    }

    .table-row {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
    }

    .select-row {
      display: flex;
      align-items: center;
      padding: 10px 0;
    }

    .house-property-sales-select {
      z-index: 1;
      width: 120px;

      :deep(.el-select__wrapper) {
        background: #001a35;
        box-shadow: inset 0px 0px 8px 0px #3d7fff;
        border-radius: 8px;
        border: 1px solid #0839a7;

        .el-select__selected-item {
          color: white;
        }
      }
    }

    .house-property-sales-select:not(:first-child) {
      margin-left: 10px;
    }

    .policy-impact-analysis-left {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px;
      width: 48%;
      height: 280px;
      box-sizing: border-box;
      position: relative;

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .policy-list {
        width: 100%;

        /deep/ .el-table {
          height: 160px;

          .el-scrollbar__view {
            width: 100%;
          }

          .el-table__empty-block {
            height: 130px !important;
          }
        }

        .pubilc-chart-title:nth-of-type(2) {
          margin-top: 20px;
        }
      }

      .policy-impact-analysis-forecast {
        position: relative;

        .pubilc-chart-title {
          line-height: 46px;
        }

        .policy-impact-analysis-house-property-forecast-tabs {
          position: relative;
          right: 0px;
          margin-top: 10px;
        }

        /deep/ .policy-impact-analysis-house-property-forecast-date-picker {
          position: absolute;
          right: 15px;
          top: 15px;
          width: 170px;
          height: 20px;
        }
      }
    }

    .policy-impact-analysis-right {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-648-575.png");
      background-size: 100% 100%;
      padding: 16px 11px 20px;
      width: 48%;
      height: 280px;
      box-sizing: border-box;
      position: relative;

      .title-row {
        width: 100%;
        display: flex;
        align-items: center;
      }

      .house-property-sales-select {
        z-index: 1;
        width: 160px;

        :deep(.el-select__wrapper) {
          background: #001a35;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          border: 1px solid #0839a7;

          .el-select__selected-item {
            color: white;
          }
        }
      }

      .policy-list {
        width: 100%;

        /deep/ .el-table {
          height: 180px;

          .el-scrollbar__view {
            width: 100%;
          }

          .el-table__empty-block {
            height: 180px !important;
          }
        }

        .pubilc-chart-title:nth-of-type(2) {
          margin-top: 20px;
        }
      }

      .policy-impact-analysis-forecast {
        position: relative;

        .pubilc-chart-title {
          line-height: 46px;
        }

        .policy-impact-analysis-house-property-forecast-tabs {
          position: relative;
          right: 0px;
          margin-top: 10px;
        }

        /deep/ .policy-impact-analysis-house-property-forecast-date-picker {
          position: absolute;
          right: 15px;
          top: 15px;
          width: 170px;
          height: 20px;
        }
      }
    }

    .public-tabs {
      position: absolute;
      right: 20px;
      top: 0;

      :deep(.el-tabs) {
        height: 46px;
        display: flex;
        align-items: center;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap:after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          text-align: center;
          padding: 0 20px;
          font-size: 12px;
          height: 30px;
          box-shadow: inset 0px 0px 8px 0px #3d7fff;
          border-radius: 8px;
          cursor: pointer;
          color: white;
        }

        .el-tabs__item:not(:last-child) {
          margin-right: 5px;
        }

        .el-tabs__item.is-active {
          background: linear-gradient(60deg, #0e5fff 0%, #00ffff 100%);
        }
      }
    }
  }
}

.pubilc-chart-title {
  font-size: 14px;
  font-weight: bold;
}

:deep(.el-date-editor) {
  opacity: 1;
}

.custom-select-option {
  color: #ffffff;
  background: #1C5BCC;
}

.custom-select-option.is-selected {
  color: #00e0ff;
}

.custom-select-option:hover {
  background: #368CF2;
}
</style>
